{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>DIV清单设计</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
    <link rel="icon" type="image.png" href="/static/images/favicon.ico">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/editor/editor.css">
</head>

<body>
<div class="container_fluid">
    <div class="row_fluid">
        <div class="col-xs-12 col-md-7" style="padding:0.5% 0.5%;">
            <div class="NightTheme">
                <div id="main_container">
                    <div id="core" class="core core_margin1">
                        <div class="editorSet clearfix">
                            <div>
                                <div class="editor">
                                    <span class="label">{{name|safe}}</span><a class="submit-btn" id="submit">保存DIV</a>
                                    <select id="ace-theme">
                                        <option value="clouds">clouds</option>
                                        <option value="monokai">monokai</option>
                                        <option value="chrome">chrome</option>
                                        <option value="github">github</option>
                                        <option value="eclipse">eclipse</option>
                                        <option value="tomorrow">tomorrow</option>
                                        <option value="dawn">dawn</option>
                                        <option value="sqlserver">sqlserver</option>
                                        <option value="twilight">twilight</option>
                                    </select><span id="printlog" style="color:red">带#号的行为标识位,不要修改</span>
                                    <a class="glyphicon glyphicon-sort-by-attributes" title="重置顺序" href="#"
                                       style="color: rgb(255, 140, 60);float:right" data-toggle="modal"
                                       data-target="#myModal_reset"></a>
                                    <a class="glyphicon glyphicon-question-sign" title="帮助" href="#"
                                       style="color: rgb(155, 205, 60);float:right" onclick="load_help('help_divlist')"></a>
                                    <a class="glyphicon glyphicon-certificate" title="开启实时调试" id="id_autohtml" href="#"
                                       style="color: gray;float:right" onclick="auto_html()"></a>
                                    <pre id="editor1" class="edit-area"></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-5" style="padding:0.1% 0.1%;" id="preview">点击上方太阳标识可开启实时调试</div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

<div class="modal fade" id="myModal_reset" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_reset" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel_reset">
					确认重置顺序
				</h4>
			</div>
			<div class="modal-body">
				将按照目前的顺序重置编号,自动更接option中的序号,并且将未激活的排在最后面
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="reset_seq()">
					开始执行
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="/static/ace/ace.js"></script>
<script type="text/javascript" src="/static/ace/ext-language_tools.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/editor/common.js"></script>
<script type="text/javascript">
    editor1=init_editor('html');
    editor1.setValue(`{{div_str|safe}}`);
    var autoshow = false;
    $('#submit').click(function () {
        let e = editor1.getValue();
        console.log(e);
        $.ajax({
            type: "POST",
            url: "/echart/save_divlist/",
            data: {dashid: GetQueryString('dashid'), div: e},
            success: function (data) {
                console.log(data);
                $('#printlog').html(data['msg']);
                if (GetQueryString('r')) {
                    try {
                        window.opener.location.reload();
                        // window.opener=null;window.close();
                    } catch (e) {
                        console.log('no opener');
                    }
                }
            }
        });
    });
    editor1.getSession().on('change', function (e) {
        if(autoshow){$("#preview").html(editor1.getValue());}
        $("#printlog").html('');
    });

function reset_seq(){
    $.ajax({
        type: "GET",
        url: "/echart/reset_divseq/?dashid=" + GetQueryString('dashid'),
        success: function (data) {
            $('#printlog').html(data['msg']);
            $('#myModal_reset').modal('hide');
                try {
                    window.opener.location.reload();
                } catch (e) {
                    console.log('no opener');
                }
            }
    })}
    function auto_html() {
    autoshow = !autoshow;
    if(autoshow){$('#id_autohtml').css('color', 'red')}else{$('#id_autohtml').css('color', 'gray')}
}
</script>
</body>
</html>